<!DOCTYPE html>

<html>

<head>

<title>vizito响应式触屏手机网站模板</title>

<!-- meta tags start -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<!-- meta tags end -->



<!-- favorite icon starts -->

<link rel="shortcut icon" href="images/common/favicon.ico" type="image/x-icon" />

<!-- favorite icon ends -->







<!-- CSS files start -->

<link href="css/framework.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/elements.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/responsive.css" rel="stylesheet" type="text/css" media="screen" />

<link href="css/hidpi.css" rel="stylesheet" type="text/css" media="screen" />

<link href="css/skin.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />

<!-- CSS files end -->



<!-- JavaScript files start -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/effects.jquery-ui.min.js"></script>

<script type="text/javascript" src="js/jquery.nivo-slider.min.js"></script>

<script type="text/javascript" src="js/jquery.colorbox.min.js"></script>

<script type="text/javascript" src="js/custom.js"></script>

<!-- JavaScript files end -->

</head>

<body>

<!-- website wrapper starts -->

<div class="websiteWrapper"> 

  

  <!-- main menu wrapper starts -->

  <ul class="mainMenuWrapper">

    <li><a href="index.html">网站首页</a></li>

    <li class="currentPage"><a href="typography.html">公司简介</a> </li>

    <li><a href="faq.html">折叠菜单</a></li>

    <li><a href="404.html">404页面</a></li>

    <li><a href="portfolioOneColumn.html">单列图片</a></li>

    <li><a href="portfolioTwoColumns.html">双列图片</a></li>

    <li><a href="portfolioOneColumnFilterable.html">筛选单列</a></li>

    <li><a href="portfolioTwoColumnsFilterable.html">筛选双列</a></li>

    <li><a href="singleProject.html">文字内容</a></li>

    <li><a href="blog.html">新闻资讯</a> </li>

    <li><a href="singlePost.html">新闻内容</a></li>

    <li><a href="contact.html">联系我们</a></li>

  </ul>

  <!-- main menu wrapper ends --> 

  

  <!-- header wrapper starts -->

  <div class="headerOuterWrapper">

    <div class="headerWrapper"> <a class="mainLogo" href="index.html"><img src="images/mainLogo.png" alt=""/></a> <a href="" class="mainMenuButton"></a><span class="mainMenuDecoLine"></span> </div>

  </div>

  <!-- header wrapper ends -->

  

  <div class="pageBreak headerBreak"></div>

  

  <!-- page wrapper starts -->

  <div class="pageWrapper"> 

    

    <!-- page content wrapper starts -->

    <div class="pageContentWrapper"> 

      <!-- page title starts -->

      <h3 class="pageTitle">About "vizito"</h3>

      <!-- page title ends -->

      <p>Welcome to "vizito"!</p>

      <p>If you are looking for a versatile mobile template that will work on all mobile devices not just smartphones, then you found the right one.</p>

      <p>"vizito" is not just another responsive template limited to certain screen sizes. This template has a liquid structure based on a {solid} CSS framework that will adapt to any screen, including retina displays.</p>

      <div class="textBreakBoth"></div>

      <h4>Columns:</h4>

      <!-- one half start -->

      <div class="columnWrapper oneHalf">

        <h4>1/2</h4>

        <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi opti.</p>

      </div>

      <div class="columnWrapper oneHalf lastColumn">

        <h4>1/2</h4>

        <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi opti.</p>

      </div>

      <!-- one half end -->

      <div class="clear"></div>

      <!-- one third start -->

      <div class="columnWrapper oneThird">

        <h4>1/3</h4>

        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p>

      </div>

      <div class="columnWrapper oneThird">

        <h4>1/3</h4>

        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p>

      </div>

      <div class="columnWrapper oneThird lastColumn">

        <h4>1/3</h4>

        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p>

      </div>

      <!-- one third end -->

      <div class="clear"></div>

      <div class="textBreakBottom"></div>

      <h4 class="blockTitle">Tables:</h4>

      <!-- table starts -->

      <table>

        <thead>

          <tr>

            <th>Number</th>

            <th>Product</th>

            <th>Price</th>

            <th>Availability</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <td>1</td>

            <td>Vero</td>

            <td>$32</td>

            <td><span class="singleIconWrapper iconCheckmarkDark"></span></td>

          </tr>

          <tr>

            <td>2</td>

            <td>Ipsum</td>

            <td>$87</td>

            <td><span class="singleIconWrapper iconCheckmarkDark"></span></td>

          </tr>

          <tr>

            <td>3</td>

            <td>Amet</td>

            <td>$99</td>

            <td><span class="singleIconWrapper iconCheckmarkDark"></span></td>

          </tr>

          <tr>

            <td>4</td>

            <td>Dolor</td>

            <td>$169</td>

            <td><span class="singleIconWrapper iconNoDark"></span></td>

          </tr>

        </tbody>

      </table>

      <!-- table ends -->

      <div class="textBreakBottom"></div>

      <h4 class="blockTitle">Quotes:</h4>

      <!-- large quote starts -->

      <div class="quoteWrapper"> <a href="" class="quoteAvatar"><img src="images/commentAvatarBg.png" alt=""></a>

        <blockquote>

          <p>"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

          <cite>- John Doe</cite></blockquote>

      </div>

      <!-- large quote ends --> 

      <!-- regular quote starts -->

      <blockquote>

        <p>"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

        <cite>- John Doe</cite> </blockquote>

      <!-- regular quote ends -->

      <div class="textBreakBoth"></div>

      <h4 class="blockTitle">Alert Boxes:</h4>

      <!-- alert box starts -->

      <div class="alertBox alertBoxWarning">

        <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p>

        <a href="" class="alertBoxButton"></a> </div>

      <!-- alert box ends --> 

      <!-- alert box starts -->

      <div class="alertBox alertBoxStop">

        <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p>

        <a href="" class="alertBoxButton"></a> </div>

      <!-- alert box ends --> 

      <!-- alert box starts -->

      <div class="alertBox alertBoxGo">

        <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p>

        <a href="" class="alertBoxButton"></a> </div>

      <!-- alert box ends --> 

      <!-- alert box starts -->

      <div class="alertBox alertBoxInfo alertBoxTextBreak">

        <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p>

        <a href="" class="alertBoxButton"></a> </div>

      <!-- alert box ends -->

      <div class="textBreakBoth"></div>

      <h4 class="blockTitle">Highlighted Texts:</h4>

      <!-- highlighted texts start -->

      <p><span class="highlight highlightDefault">Temporibus</span> autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</p>

      <p><span class="highlight highlightOrange">Temporibus</span> autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</p>

      <p><span class="highlight highlightRed">Temporibus</span> autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</p>

      <p><span class="highlight highlightGreen">Temporibus</span> autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</p>

      <p><span class="highlight highlightBlue">Temporibus</span> autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</p>

      <p><span class="highlight highlightPink">Temporibus</span> autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</p>

      <!-- highlighted texts end -->

      <div class="textBreakBoth"></div>

      <h4 class="blockTitle">Buttons:</h4>

      <!-- buttons start -->

      <p><a href="" class="buttonWrapper buttonDefault buttonBolt">Button</a> <a href="" class="buttonWrapper buttonOrange buttonCalendar">Button</a> <a href="" class="buttonWrapper buttonRed buttonNo">Button</a></p>

      <p><a href="" class="buttonWrapper buttonGreen buttonCheckmark">Button</a> <a href="" class="buttonWrapper buttonBlue buttonLocation">Button</a> <a href="" class="buttonWrapper buttonPink buttonArrowRight">Button</a></p>

      <div class="pageSpacer"></div>

      <div class="pageSpacer"></div>

      <!-- buttons end -->

      <div class="textBreakBottom"></div>

    </div>

    <!-- page content wrapper ends --> 

    

  </div>

  <!-- page wrapper ends --> 

  

  <!-- footer wrapper starts -->

  <div class="footerTopDeco"></div>

  <div class="footerWrapper"> 

    <!-- copyright wrapper starts -->

    <div class="copyrightWrapper"> 

      <!-- copyright starts --> 

      <span class="copyright">Powered by <a href="http://www.17sucai.com" target="_blank">17素材网</a> Copyright &copy; 2014 - 2015</span> 

      <!-- copyright ends --> 

      <!-- back to top button starts --> 

      <a href="" class="backToTopButton"></a> 

      <!-- back to top button ends --> 

    </div>

    <!-- copyright wrapper ends --> 

  </div>

  <!-- footer wrapper ends --> 

  

</div>

<!-- website wrapper ends -->

</body>

</html>

